<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>私教课列表</title>

	<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no"
		name="viewport">
	<script src="js/flexible.js"></script>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/homePage.css">
	<link rel="stylesheet" href="css/flexible.css">
	<link rel="stylesheet" href="css/flex.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css">
	<link rel="stylesheet" href="css/mobiscroll.custom-3.0.0-beta6.min.css">
	<style>
		body {
			background-color: #F7F7F7;
			margin: 0px;
			padding: 0px;
		}
	</style>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/mobiscroll.custom-3.0.0-beta6.min.js"></script>
	<script src="js/vue/vue.js"></script>
	<script src="js/vue/axios.js"></script>
	<script src="js/vue/qs.js"></script>
	<script src="js/vue/MD5.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

</head>

<body>

	<div id="app">


		<div style="height: 0.1rem;"></div>

		<div class="curriculum_heads" flex="main:center cross:center">

			<div ref="rl" class="rl" v-on:click="show = true">
				<img src="images/rl.png">
			</div>
			<div>
				<van-calendar v-model="show" @confirm="onConfirm" :show-confirm="false" />
			</div>
			<template>
				<div class="rq">
					<ul>
						<li v-for="item in dateList" :key="item.time" @click="getweakInfo(item.time)">
							<span v-bind:class="{rq_check:item.check=='1'}" class="s">{{item.week}}</span><br>
							<span v-bind:class="{rq_check:item.check=='1'}" class=" x">{{item.date}}</span>
						</li>
					</ul>
				</div>
			</template>

		</div>
		<div style="height: 0.1rem;"></div>


		<div v-for="item in type" :key="item">
			<div flex="dir:top" style="height: 1.18rem; background-color: white;">
				<div flex="main:center cross:center" style="width: 100%; height: 0.47rem;">
					<div class="blueDot"></div>
					<div class="w8rem"></div>

					<div style="font-size: 0.15rem;">
						<b>{{item.Title}}</b>
					</div>
					<div class="w8rem"></div>
					<div class="blueDot"></div>
				</div>
				<div class="lineMar15"></div>
				<div flex="main:justify ">
					<div style="margin-top: 0.09rem;margin-left: 0.25rem;">
						<div style="font-size: 0.14rem; color: #333333;">
							教练：{{staff.Sname}}
						</div>
						<div style="height: 0.1rem;"></div>
						<div style="font-size: 0.14rem; color: #333333;">
							课程时长：{{item.Chour}}分钟
						</div>
					</div>

					<div flex="cross:center" style="height: 100%; margin-right: 0.25rem;">
						<div @click="clickYuYue(item)" flex="main:center cross:center"
							style="height: 0.22rem; width: 0.55rem; border-radius: 0.11rem; background-color: #1778FF; font-size: 0.11rem; color: white;">
							预约
						</div>
					</div>
				</div>
			</div>
			<div style="height: 0.1rem;"></div>
		</div>


	</div>

</body>

<script>
	Date.prototype.format = function (fmt) {
		var o = {
			"M+": this.getMonth() + 1, //月份
			"d+": this.getDate(), //日
			"h+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			"S": this.getMilliseconds() //毫秒
		};
		if (/(y+)/.test(fmt)) {
			fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		}
		for (var k in o) {
			if (new RegExp("(" + k + ")").test(fmt)) {
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			}
		}
		return fmt;
	}

	var vm = new Vue({

		el: '#app',

		data: {

			dateList: [],
			show: false,

			Uid: '',
			type: [], //课程列表
			staff: {},// 员工信息

		},

		created() {

			this.setCanS()

		},

		methods: {

			//设置参数

			setCanS() {

				let Request = new Object()

				Request = GetRequest()

				this.Uid = Request['uid']


				let time = ''
				var curr = new Date().format("yyyy-MM-dd");
				this.getweakInfo(curr);


			},

			//获取本周信息
			getweakInfo(time) {

				if (this.date == time) {
					return;
				}
				var curr = new Date(time);

				var now = new Date(new Date().toLocaleDateString()).getTime();
				var currs = curr.getTime();

				if (currs < now) {
					this.$toast("所选时间不小于今天")
					return
				}


				this.getlists(time)


				var date = new Date();
				// 本周一的日期
				date.setDate(date.getDate() - date.getDay() + 1);

				this.date = time;
				;
				var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
				var arr = ["日", "一", "二", "三", "四", "五", "六"];
				var list = [];

				for (let index = 0; index < arr.length; index++) {
					const week = arr[index];
					var last = first + index;

					var lastday = new Date(time);
					lastday.setDate(last);

					var date = lastday.format("MM/dd");
					var time1 = lastday.format("yyyy-MM-dd");
					var check = 0;
					if (time == time1) {
						check = 1;
					}

					var dic = { "week": week, "date": date, "time": time1, "check": check };
					list.push(dic);

				}
				this.dateList = list;

			},
			getlists(time) {

				const params = {
					"uid": this.Uid,
					date: time

				}


				window.vant.Toast.loading({
					mask: true,
					message: '加载中...'
				});


				getVs()
				var that = this;
				axios.post('/mobileapi/coach/curr.php?act=sjListNew', Qs.stringify(params)).then(function (response) {
					window.vant.Toast.clear();
					let { data, code } = response.data
					if (code !== 200) {
						window.vant.Toast.fail(msg)
					} else {
						that.type = data.type;
						that.staff = data.staff;
					}
				}).catch(function (error) {
					window.vant.Toast.clear();
					console.log(error);

				});
			},


			//选择日期
			onConfirm(date) {
				this.show = false;
				var curr = date.format("yyyy-MM-dd");
				this.getweakInfo(curr);
			},
			clickYuYue(item) {


				var dateJson;
				this.dateList.forEach(element => {
					if (element.check == 1) {
						dateJson = JSON.stringify(element);
					}
				});
				console.log(this.dateList);
				sessionStorage.setItem('ykdate', dateJson);
				sessionStorage.setItem("keitem", JSON.stringify(item));
				sessionStorage.setItem("CoachInfo", JSON.stringify(this.staff));
				window.location.href = 'privateOrder.html?uid='+this.Uid+"&date=" + this.date;

			}

		}

	})

</script>

</html>